<template>
  <!--  关于我们-->
  <div>
    <div class="container">
      <!--    头部区域-->
      <div class="header">
        <div class="header-text">
          关于我们
        </div>
        <div class="header-content">
          社区基本问题、绑定问题、跟随问题内容解决，相应的问题可进行查看，若还未解决您的问题可提交客服工单查询处理。快讯、财经日历等行情实时查询工具，与金提供市场快讯、财经日历等行情实时查询工具，与金
        </div>
      </div>
      <!--    内容区域-->
      <div class="content">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="服务条款" name="notice">
            <!--<detail :active="active"/> -->
            <div class="box" v-html="numbertext.text_1"></div>
          </el-tab-pane>
          <el-tab-pane label="隐私政策" name="issue">
            <div class="box" v-html="numbertext.text_2"></div>
          </el-tab-pane>
          <el-tab-pane label="免责声明" name="guide">
            <div class="box" v-html="numbertext.text_3"></div>
          </el-tab-pane>
          <el-tab-pane label="平台风险警示" name="clause">
            <div class="box" v-html="numbertext.text_4"></div>
          </el-tab-pane>
          <el-tab-pane label="社区基本守则" name="risk">
            <div class="box" v-html="numbertext.text_5"></div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { numberApi } from '@/api/index';
import detail from '@/views/regard/components/detail'
export default {
  name: 'marketIndex',
  data() {
    return {
      activeIndex: '1',
      activeName: 'notice',
      active: 0,

      numbertext: [],
    }
  },
  components: {
    detail
  },

  created() {
    this.getNumbertext()
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },

    //获取文本
    getNumbertext() {
      numberApi().then(res => {
        console.log(res.data.data, '行情文本')
        this.numbertext = res.data.data
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  .header {
    height: 100%;
    background-image: linear-gradient(to bottom, #002748 0%, #002748 30%, #294c69 70%, #294c69 100%);
    color: #ffffff;

    .header-text {
      padding: 80px 150px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 40px;
      color: #ffffff;
    }

    .header-content {
      display: flex;
      align-items: center;
      text-align: left;
      padding: 0 150px 30px;
      font-size: 14px;
      line-height: 20px;
      color: transparent;
    }
  }

  .content {
    background-color: #f4f7fe;

    .box {
      min-height: 500px;
      background-color: #ffffff;
      padding: 20px 20px;
      margin: 0 150px 0;
      text-align: left;
      margin-bottom: 80px;

    }

    .item {
      padding: 10px 150px 5px;
    }
  }
}

::v-deep .el-tabs__nav-scroll {
  background-color: #ffffff !important;
  padding: 5px 10px 0 !important;
  margin: 10px 150px 5px !important;
}

::v-deep .el-tabs__nav-wrap::after {
  background-color: #f4f7fe !important;
}

::v-deep .el-tabs__header {
  margin: 0 0 5px;
}

::v-deep .el-tabs__item.is-active {
  color: #333333;
  font-weight: bold;
}

::v-deep .el-tabs__active-bar {
  background: #333333;
}

/* 鼠标选中时样式 */
::v-deep .el-tabs__item.is-active {
  color: #333333;
  opacity: 1;
}

/* 鼠标悬浮时样式 */
::v-deep .el-tabs__item:hover {
  color: #333333;
  cursor: pointer;
  opacity: 1;
}

::v-deep .el-collapse-item__header {
  position: relative;
}

::v-deep .el-collapse-item__header::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #000;
  /* Replace #000 with your desired color */
  margin-right: 10px;
}

::v-deep .el-collapse-item.is-active .el-collapse-item__header::before {
  transform: translate(-50%) rotate(90deg);
}

::v-deep .el-tabs__item {
  // background-color: skyblue;
  font-size: 16px;
  font-weight: 100;
  color: #333333;
  text-align: center;
  width: 120px;
}

::v-deep .el-tabs__item.is-active {
  //border-bottom: 3px solid black;
  color: #333333;
  font-weight: bold;
}

::v-deep .el-tabs__active-bar {
  background: #333333;
}

/* 鼠标选中时样式 */
::v-deep .el-tabs__item.is-active {
  color: #333333;
  opacity: 1;
}

/* 鼠标悬浮时样式 */
::v-deep .el-tabs__item:hover {
  color: #333333;
  cursor: pointer;
  opacity: 1;
}

::v-deep .el-collapse-item__arrow {
  display: none;
}</style>
